<template>
  <div>
    <div>firtName:<input v-model="firstName"></div>
     <div>middleName:<input v-model="middleName"></div>
     <div>lastName:<input v-model="lastName"></div>
     <div>fullName:<input v-model="fullName"></div>
  </div>
</template>

<script lang='ts' setup>
import {ref,computed} from 'vue'
let firstName=ref<string>("zhai")
let middleName=ref<string>("ji")
let lastName=ref<string>('zhe')
// let fullName=computed(()=>{
//   return firstName.value+" "+middleName.value+" "+lastName.value
// })

let fullName=computed({
  set(v: string) {
    let ary=v.split(" ")
    firstName.value=ary[0]
    middleName.value=ary[1]
    lastName.value=ary[2]
  },
  get() : string {
    return firstName.value+" "+middleName.value+" "+lastName.value
  }
})

</script>

<style lang='scss' scoped>
</style>